import React, { Component } from 'react'
import { getDeptList } from '@/services/api.js'
import { Modal, Form, Input, Select, Radio } from 'antd';
const { Option } = Select

export default class addOrEdit extends Component {
  state = {
    deptOptions: [],
    itemForm: {}
  }
  componentDidMount() {
    console.log('props----', this.props);
    this.getDeptList()
    this.setState({
      itemForm: {...this.props.item}
    })
    if(this.props.item) {
      console.log(1111);
      this.formRef.current.setFieldsValue({...this.props.item})
    }
  }
  getDeptList = async () => {
    let res = await getDeptList()
    this.setState({
      deptOptions: res.list
    })
  }
  handleOk = async () => {
    console.log('新增用户------');
    await this.formRef.current.validateFields()
    this.formRef.current.resetFields()
    this.props.closeModal()
  }
  handleCancel = () => {
    console.log('取消------');
    this.formRef.current.resetFields()
    this.props.closeModal()
  }
  formRef = React.createRef()
  render() {
    const { isAdd, visible } = this.props
    return (
      <div>
        <Modal
          centered
          title={isAdd ? '新增' : '编辑'}
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form initialValues={{status: '1'}} ref={this.formRef} labelAlign="right" labelCol={{span: 5}}>
            <Form.Item label="用户名" name="userName" rules={[{required: true}]}>
              <Input placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item label="所属机构" name="deptName" rules={[{required: true}]}>
              <Select>
                {this.state.deptOptions.map((item,index) => {
                  return <Option key={item.id} value={item.value}>{item.label}</Option>
                })}
              </Select>
            </Form.Item>
            <Form.Item label="密码" name="password" rules={[{required: true}]}>
              <Input placeholder="请输入密码" type="password" />
            </Form.Item>
            <Form.Item label="确认密码" name="confirmPassword" rules={[{required: true}]}>
              <Input placeholder="请再次输入密码" type="password" />
            </Form.Item>
            <Form.Item label="真实姓名" name="realName" rules={[{required: true}]}>
              <Input placeholder="请输入真实姓名" />
            </Form.Item>
            <Form.Item label="性别" name="sex">
              <Radio.Group>
                <Radio value="0">男</Radio>
                <Radio value="1">女</Radio>
                <Radio value="2">保密</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item label="邮箱" name="email">
              <Input placeholder="请输入邮箱" />
            </Form.Item>
            <Form.Item label="手机号" name="phone">
              <Input placeholder="请输入手机号" />
            </Form.Item>
            <Form.Item label="状态" name="status">
              <Radio.Group>
                <Radio value="1">启用</Radio>
                <Radio value="0">禁用</Radio>
              </Radio.Group>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}
